/**
 * 子组件
 */
const children = Vue.extend({
  // 组件名称
  name: 'children',
  // 组件模板
  template: `<button @click="add">{{text}}</button>`,
  // 组件 props
  props: ['text'],
  // 组件方法
  methods: {
    add() {
      this.$emit('addCount')
      console.log()
    }
  }
})

/**
 * 父组件
 */
const father = Vue.extend({
  // 组件名称
  name: 'father',
  // 使用组件
  components: { children },
  // 组件模板
  template: `
    <div>
      <div>{{count}}</div>
      <children @addCount="addCount" text="增加计数器"/>
    </div>
  `,
  // 组件数据
  // 需要使用函数 returns 返回
  // 否则复用组件时将同时使用一份数据
  data() {
    return {
      count: 0
    }
  },
  // 组件方法
  methods: {
    addCount() {
      this.count++
    }
  }
})

/**
 * Vue 实例
 */
const vue = new Vue({
  // 挂载 #app
  el: '#app',
  // 使用组件
  components: { father },
  // 组件模板
  template: `<p><father/></p>`,
  // 组件数据
  data() {
    return {
      count: 0
    }
  }
})
